<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="security"
	uri="http://www.springframework.org/security/tags"%>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
 	type="text/javascript"></script>
 	
<script type="text/javascript">
	$(document).ready(function() {
		$("#alertMess").hide();
		$("#mytable").dataTable();
		$("#changePassForm").validate({
			rules: {
				newpass: {
					required: true,
					minlength: 8,
					maxlength: 20
				},
			},
			submitHandler: function(){
		          $("#changePassForm").submit();
		    }
		})
	});
	
	function checkConfirmPass() {
		var oldpass = $("#oldpass").val();
		var newpass = $("#newpass").val();
		var conpass = $("#confirmednewpass").val();
		if (newpass == conpass) {			
			return true;
		} else {
			$("#alertMess").show();
			$("#alertMess").html("Confirmed password is different from new password");
			return false;
		}
	}
</script>

<div id="content-outer">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<div id="page-heading">
			<h1>Customer Information</h1>
		</div>
		${passwordMessage}
		<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="content-table">
			<tr>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowleft.jpg" width="20" height="300"
					alt="" /></th>
				<th class="topleft"></th>
				<td id="tbl-border-top">&nbsp;</td>
				<th class="topright"></th>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowright.jpg" width="20" height="300"
					alt="" /></th>
			</tr>
			<tr>
				<td id="tbl-border-left"></td>
				<td>
					<div id="content-table-inner">
						<div id="content-table-inner" style="padding-left: 35px;">
							<table border="0" width="100%" cellpadding="0" cellspacing="0">
								<tr valign="top">
									<td>
										<table border="0" cellpadding="0" cellspacing="0" id="id-form">
											<tr>
												<th valign="top">Customer Login Id:</th>
												<td style="padding-left: 10px">${user.loginId }</td>
											</tr>
											<tr>
												<th valign="top">Customer Card Number Id:</th>
												<td style="padding-left: 10px">${customer.cardNumberId }</td>
											</tr>
											<tr>
												<th valign="top">First Name:</th>
												<td style="padding-left: 10px">${customer.firstName }</td>
											</tr>
											<tr>
												<th valign="top">Last Name:</th>
												<td style="padding-left: 10px">${customer.lastName }</td>
											</tr>
											<tr>
												<th valign="top">Middle Name:</th>
												<td style="padding-left: 10px">${customer.midName }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Email 1:</th>
												<td style="padding-left: 10px">${customer.email1 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Email 2:</th>
												<td style="padding-left: 10px">${customer.email2 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Address1:</th>
												<td style="padding-left: 10px">${customer.address1 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Address2:</th>
												<td style="padding-left: 10px">${customer.address2 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Phone Number:</th>
												<td style="padding-left: 10px">${customer.mobileNumber }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Home Number:</th>
												<td style="padding-left: 10px">${customer.homeNumber }</td>
												<td></td>
											</tr>
											<security:authorize access="hasRole('ROLE_USER')">
												<tr>
													<td></td>
													<td style="padding-top: 5px"><input type="submit"
														style="margin-right: 10px" class="btn btn-primary"
														data-toggle="modal" data-target="#myModal"
														value="Change Information" /> <input type="submit"
														class="btn btn-primary" data-toggle="modal"
														data-target="#myModalpass" value="Change Password" /></td>
													<td></td>
												</tr>
											</security:authorize>
										</table>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</td>
				<td id="tbl-border-right"></td>
			</tr>
			<tr>
				<th class="sized bottomleft"></th>
				<td id="tbl-border-bottom">&nbsp;</td>
				<th class="sized bottomright"></th>
			</tr>
		</table>


		<!-- Modal change info-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">Change information</h4>
					</div>
					<div class="modal-body">
						<form:form action="changeInfo" method="post"
							modelAttribute="customer">
							<table border="0" cellpadding="0" cellspacing="0" id="id-form">
								<form:input path="customerId" type="hidden" class="inp-form"
									name="customerId" value="${customer.customerId}"
									readonly="true" />
								<tr>
									<th valign="top">Card Number Id:</th>
									<td><form:input path="cardNumberId" type="text"
											class="inp-form" name="cardNumberId"
											value="${customer.cardNumberId}" readonly="true" /></td>
								</tr>
								<tr>
									<th valign="top">First Name:</th>
									<td><form:input path="firstName" type="text"
											class="inp-form" name="firstName"
											value="${customer.firstName}" /></td>
								</tr>
								<tr>
									<th valign="top">Last Name:</th>
									<td><form:input path="lastName" type="text"
											class="inp-form" name="lastName" value="${customer.lastName}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Middle Name:</th>
									<td><form:input path="midName" type="text"
											class="inp-form" name="midName" value="${customer.midName}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Email 1:</th>
									<td><form:input path="email1" type="text" class="inp-form"
											name="email1" value="${customer.email1}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Email 2:</th>
									<td><form:input path="email2" type="text" class="inp-form"
											name="email2" value="${customer.email2}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Address 1:</th>
									<td><form:input path="address1" type="text"
											class="inp-form" name="address1" value="${customer.address1}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Address 2:</th>
									<td><form:input path="address2" type="text"
											class="inp-form" name="address2" value="${customer.address2}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Mobile Number:</th>
									<td><form:input path="mobileNumber" type="text"
											class="inp-form" name="mobileNumber"
											value="${customer.mobileNumber}" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Home Number:</th>
									<td><form:input path="homeNumber" type="text"
											class="inp-form" name="homeNumber"
											value="${customer.homeNumber}" /></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td style="padding-top: 5px"><input type="submit"
										value="Change" id="changeInfo" class="btn btn-primary"
										style="margin-right: 10px" /></td>

									<td></td>
								</tr>
							</table>
						</form:form>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal change pass -->
		<div class="modal fade" id="myModalpass" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">Change information</h4>
					</div>
					<div class="modal-body">

						<div class="alert alert-warning" role="alert" id="alertMess"></div>
						<br>
						<form action="changePass" method="post" id="changePassForm">
							<table border="0" cellpadding="0" cellspacing="0" id="id-form">
								<tr>
									<th valign="top">Old Password:</th>
									<td><input type="password" class="inp-form" name="oldpass"
										id="oldpass"/></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">New Password:</th>
									<td><input type="password" class="inp-form" name="newpass"
										id="newpass" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Confirmed New Password:</th>
									<td><input type="password" class="inp-form"
										name="confirmednewpass" id="confirmednewpass" /></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td style="padding-top: 5px"><input type="submit"
										value="Change" id="changeInfo" class="btn btn-primary"
										onclick="return checkConfirmPass();"
										style="margin-right: 10px" /></td>

									<td></td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- End Modal Add Card -->



